<template>
    <div>
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content">
                    <div>
                        <span class="preview-title" v-text="courseName"></span>
                        <span class="preview-line" v-if="learningResourcesData.length > 0 || otherResourcesData.length > 0 || presetResourcesData.length > 0">/</span>
                        <span v-text="chapterName"></span>
                        <span class="chapterlists" @click="detalList" v-if=' _btn_flag == undefined'><i class="iconfont icon-liebiao1"></i> &nbsp;章节列表</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 专科版本添加详情盒子 -->
        <div style="width:1200px; margin:0 auto; position:relative">
            <div class="detailBox blocks">
                <div class="chapterList-top">
                    <p class="fl">章节列表</p>
                    <div class="fr"><i class="iconfont icon-Group-" @click="deleteFns"></i></div>
                </div>
                <el-collapse  accordion v-model="activeName" @change="handleChange">
                    <div v-for="(item,index) in appList"  :key="index" >
                        <el-collapse-item v-if="item.levels == 3" :name='index'>
                            <template slot="title">
                                <div class="collapsTitle">
                                    <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                    <i class="iconfont icon-baoguofahuo" v-else></i>
                                    <span class="collapsTitle_span">单元{{index+1}}&nbsp;{{item.name}}</span>
                                </div>
                            </template>
                            <div v-for="(items,indexs) in item.children"  :key="indexs" >
                                <div class="courseName">
                                    {{indexs+1}}&nbsp;{{items.name}}&nbsp;
                                    <i class="iconfont icon-diannao-copy" v-if="items.type == 2 || items.type == 3" style="vertical-align:baseline"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="items.type == 4"></i>
                                </div>
                                <!-- 多加数据为空 -->
                                <div v-if="items.otherInfo.length <=0 ">
                                    <span style="padding-left:28px; color:rgb(66, 66, 66)">暂无数据</span>
                                </div>
                                <div v-else  class="detailbox" v-for="(item3,index3) in items.otherInfo"  :key="index3" @click="EnteDetails(item3,item,items)" >
                                    <div class="infoName" :class="item3.type == 3 && item3.id == chapterId? 'studying':''">
                                        <i class="iconfont icon-42" v-if="!item3.show " style="color:#424242"></i>
                                        <span class="crile" :class="item3.type == 3 && item3.id == chapterId? 'crileBg':''" v-else></span>
                                        <span class="Tiltlefiles" v-if="item3.show">{{item3.name}}</span><i class="iconfont icon-diannao-copy" v-if="item3.experimentCourseFlag && item3.name != '实验学习'"></i>
                                        <span class="Tiltlefiles" v-if="!item3.show " style="color:#424242">{{item3.name}}</span>
                                    </div>
                                    <div class="fr studying" v-if="item3.type == 3 && item3.id == chapterId" >正在学<i class="iconfont icon-shijian00"></i></div>
                                </div>
                            </div>
                        </el-collapse-item>
                        <el-collapse-item  v-if="item.levels == 2" :name='index'>
                            <template slot="title">
                                <div class="collapsTitle">
                                    <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                    <i class="iconfont icon-baoguofahuo" v-else></i>
                                    <span class="collapsTitle_span">章节{{index+1}}&nbsp;{{item.name}}&nbsp;</span>
                                    <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3" style="vertical-align:baseline"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4"></i>
                                </div>
                            </template>
                            <div v-if="item.otherInfo.length > 0">
                                <div class="detailbox" v-for='(item2,index4) in item.otherInfo' :key="index4" @click="EnteDetails(item2,item)" >
                                    <div class="infoName" :class="item2.type == 3 && item2.id == chapterId? 'studying':''">
                                        <i class="iconfont icon-42" v-if="!item2.show " style="color:#424242" ></i>
                                        <span class="crile" :class="item2.type == 3 && item2.id == chapterId? 'crileBg':''" v-else></span>
                                        <span class="Tiltlefiles" v-if="item2.show">{{item2.name}}</span><i class="iconfont icon-diannao-copy" v-if="item2.experimentCourseFlag && item2.name != '实验学习'"></i>
                                        <span class="Tiltlefiles" v-if="!item2.show " style="color:#424242">{{item2.name}}</span>
                                    </div>
                                    <div class="fr studying" v-if="item2.type == 3 && item2.id == chapterId" >正在学<i class="iconfont icon-shijian00"></i></div>
                                </div>
                            </div>
                            <div v-else style="padding-left:25px;">暂无数据</div>
                        </el-collapse-item>
                    </div>
                </el-collapse>
            </div>
        </div>
        <!-- 专科版本弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtual" width="460px">
            <div class="dialog-content">
                <i class="iconfont icon-tishi"></i>
                <p>有其它实验正在进行中，是否停止它进入该实验?</p>
            </div>
            <span slot="footer" class="dialog-footer btnlist">
                <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="VirtualSave">确 定</el-button>
            </span>
        </el-dialog>
        <div class="no-data-tips" v-if="learningResourcesData.length == 0 && otherResourcesData.length == 0 && presetResourcesData.length == 0">
             <img src="./../../../assets/images/index_no_data.png" />
             <p>暂无内容</p>
        </div>
        <div class="jx-content" v-else>
            <button @click="ControlDialog" class="button-style muchControl" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER'">资源批量控制</button>
            <button class="button-style muchControl disabled" :disabled="true" v-if="roles == 'UNIVERSITY_TEACHER'">资源批量控制</button>
            <div class="jx-resource-list" v-if="learningResourcesData.length > 0">
                <h3 class="title">教学资源</h3>
                <div class="fileBox">
                    <ul>
                        <li v-for="(item, index) in learningResourcesData">
                            <img :src="item.iconPath" />
                            <p class="typeName" v-text="item.showName"></p>
                            <p class="fileName" style="color: #ddd;" v-if="!item.fileName">暂无资源</p>
                            <p class="fileName" v-else v-text="item.fileName"></p>
                            <p class="fileBtnBox">
                                <i class="iconfont icon-yanjing-xiexian disabled" title="学生端资源显隐" v-if="roles == 'UNIVERSITY_TEACHER'"></i>
                                <i class="iconfont icon-yanjing" title="学生端资源显隐" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER') && item.teacherOpenSwitch" @click="Control(5,item.name,false,item.chapterId)"></i>
                                <i class="iconfont icon-yanjing-xiexian" title="学生端资源显隐" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER') && !item.teacherOpenSwitch" @click="Control(5,item.name,true,item.chapterId)"></i>
                                <i class="iconfont icon-xiazai" title="资源下载" v-if="item.download && item.fileName" @click="downloadFile(item.remark,item.fileName,item.chapterId)"></i>
                                <i class="iconfont icon-xiazai disabled" title="资源下载" v-else></i>
                            </p>
                        </li>
                    </ul>
                    <i class="clear-fix"></i>
                </div>
            </div>
            <div class="jx-resource-list" v-if="otherResourcesData.length > 0">
                <h3 class="title">其他资源</h3>
                <div class="fileBox">
                    <ul>
                        <li v-for="(item, index) in otherResourcesData">
                            <img :src="item.iconPath" />
                            <p class="typeName" v-text="item.showName"></p>
                            <p class="fileName" style="color: #ddd;" v-if="!item.fileName">暂无资源</p>
                            <p class="fileName" v-else v-text="item.fileName"></p>
                            <p class="fileBtnBox">
                                <i class="iconfont icon-yanjing-xiexian disabled" title="学生端资源显隐" v-if="roles == 'UNIVERSITY_TEACHER'"></i>
                                <i class="iconfont icon-yanjing" title="学生端资源显隐" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER') && item.teacherOpenSwitch" @click="Control(6,item.name,false,item.chapterId)"></i>
                                <i class="iconfont icon-yanjing-xiexian" title="学生端资源显隐" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER') && !item.teacherOpenSwitch" @click="Control(6,item.name,true,item.chapterId)"></i>
                                <i class="iconfont icon-xiazai" title="资源下载" v-if="item.download && item.fileName" @click="downloadFile(item.remark,item.fileName,item.chapterId)"></i>
                                <i class="iconfont icon-xiazai disabled" title="资源下载" v-else></i>
                            </p>
                        </li>
                    </ul>
                    <i class="clear-fix"></i>
                </div>
            </div>
            <div class="jx-resource-list" v-if="presetResourcesData.length > 0">
                <h3 class="title">预置资源</h3>
                <div class="fileBox">
                    <ul>
                         <li v-for="(item, index) in presetResourcesData">
                            <img :src="item.iconPath" />
                            <p class="typeName" v-text="item.showName"></p>
                            <p class="fileName" v-text="item.fileName"></p>
                            <p class="fileBtnBox">
                                <i class="iconfont icon-xiazai" title="资源下载" v-if="item.download && item.fileName" @click="downloadFile(item.remark,item.fileName)"></i>
                                <i class="iconfont icon-xiazai disabled" title="资源下载" v-else></i>
                            </p>
                        </li>
                    </ul>
                    <i class="clear-fix"></i>
                </div>
            </div>
            <el-dialog
                title="批量控制"
                :visible.sync="dialogVisible"
                width="530px"
                id="ymuchControl"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                >
                <div class="headBox"><span><i class="iconfont icon-jingshi"></i>&emsp;该功能批量控制学生端该课程教学资源的显示/隐藏</span></div>
                <div class="contentBox">
                    <ul>
                        <li>
                            <i>学习课件</i>
                            <el-switch
                                class="switches"
                                v-model="value1"
                                :width="34"
                                active-color="#13ce66"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>实验视频</i>
                            <el-switch
                                class="switches"
                                v-model="value2"
                                :width="34"
                                active-color="#13ce66"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>实验手册</i>
                            <el-switch
                                v-model="value3"
                                class="switches"
                                :width="34"
                                active-color="#13ce66"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i v-if="colages && colages.length >= 1 && colages.includes('本科')">理论视频</i>
                            <i v-if="colages && colages.length == 1 && colages.includes('专科')">引导视频</i>
                            <el-switch
                                v-model="value4"
                                class="switches"
                                :width="34"
                                active-color="#13ce66"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>随堂练习</i>
                            <el-switch
                                v-model="value5"
                                class="switches"
                                :width="34"
                                active-color="#13ce66"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>随堂答案</i>
                            <el-switch
                                v-model="value6"
                                active-color="#13ce66"
                                class="switches"
                                :width="34"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>备课材料</i>
                            <el-switch
                                v-model="value7"
                                active-color="#13ce66"
                                class="switches"
                                :width="34"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>课程材料</i>
                            <el-switch
                                v-model="value8"
                                active-color="#13ce66"
                                class="switches"
                                :width="34"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>其他资源</i>
                            <el-switch
                                v-model="value9"
                                active-color="#13ce66"
                                class="switches"
                                :width="34"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                    </ul>
                    <div class="clear-fix"></div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <button class="button-style" @click="ControlSave">确定</button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                // 课程ID
                courseId: '',
                // 章节ID
                chapterId: '',
                // 教学资源data
                learningResourcesData: '',
                // 其他资源data
                otherResourcesData: '',
                // 预置资源data
                presetResourcesData: '',
                // 批量控制弹窗
                dialogVisible:false,
                value1:true,
                value2:true,
                value3:true,
                value4:true,
                value5:true,
                value6:true,
                value7:true,
                value8:true,
                value9:true,
                // 课程名称
                courseName: '',
                // 章节名称
                chapterName: '',
                //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
                roles: '',

                //专科版本
                activeName:'',
                appList:[],
                roles:'',
                //是否添加过班级
                userStatus:'',
                courseId:'',
                //占用弹窗
                dialogVirtual:false,
                //是否从技术库跳转的标识
                 _btn_flag:'',
                 //存储点击的那个章节id
                 clickId:'',
                 openFlag:'',
                 // 班级ID
                 classId: '',

                 //专科还是本科
                 colages:[],
                 stepType:'',
                 singleTask:''
            }
        },
        created () {
            let self = this
             //班级Id
            self.classId = self.$route.query.classId
            // 课程ID
            self.courseId = self.$route.query.courseId
            // 章节ID
            self.chapterId = self.$route.query.chapterId
            // 从状态管理获取roles
            self.roles = self.$store.state.user.roles[0]
            //专科版本
            self._btn_flag = self.$route.query._btn_flag
            // 初始化资源列表
            self.initResourceList()
            // 初始化头部信息
            self.InitHeaderInfo()
            //专科版本
            this.DetailData()
            this.ClassInit()

            //yx 添加分辨率判断
            self.$nextTick(()=>{
                if(window.screen.height <= 900){
                    //console.log(window.screen.height,147)
                    $('.blocks').css('max-height','520px')
                    $('.detailBox').css('max-height','520px')
                    
                }
            })
        },
        methods: {
            //专科版本建设
            //初始化详情列表
             handleChange(val){
                //val 索引
                this.openFlag = val
                let vals = String(val)
                this.openFlag = vals
            },
            DetailData(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.appList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //点击关闭
            deleteFns(){
                $('.detailBox').hide()
            },
            //点击详情
            detalList(){
                let self = this
                let IndexValue;
                for(let i =0; i< self.appList.length; i++){
                    if(self.appList[i].chapterIds.includes(Number(self.chapterId))){
                        IndexValue = i
                    }
                }
                // for(let i =0; i< this.appList.length; i++){
                //     if(this.appList[i].recentlyStudiedFlag == 1){
                //         IndexValue = i
                //     }
                // }
                this.activeName = IndexValue
                 //最近学习索引等于打开这项
                this.openFlag = IndexValue
                this.scrollFn(790)
                //判断屏幕分辨率
                if(window.screen.height <= 900){
                    this.scrollFn(540)
                }
                $('.detailBox').stop().slideToggle()
            },
            //自动到最近学习
            scrollFn(n){
                // this.$nextTick(()=>{
                //     $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top},20)
                // })
                this.$nextTick(()=>{
                    let topValue = $('.studying').parent().offset().top
                    console.log(topValue,7878)
                    if(topValue > n){
                        $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top-100},20)
                    }

                })
            },
            // 是否添加过班级
            ClassInit() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/user-status').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.userStatus = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
             //进入详情
             EnteDetails(item,itembig,items){
                let self = this
               self.singleTask =  item.chapterId
               //self.stepTypeStr = ''
                if(itembig.levels == 2 ){
                    self.stepType = itembig.stepTypeStr
                }else if( itembig.levels == 3){
                    self.stepType = items.stepTypeStr
                }
                //如果为真，可以跳转
                if(item.show){
                    if(item.name == '理论学习' || item.name == '任务引导'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CoursewareDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '教学资源'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CourseResourceDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                        window.location.reload()
                    }else if(item.name == '备课材料'){

                        self.$router.push({
                            path:'/Teaching/MyCourses/CourseMaterialDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '实验学习' ||  item.experimentCourseFlag){
                        if(self.userStatus == 'NOT_CREATE_CLASS'){
                            self.$router.push({
                                path:'/Teaching/MyCourses/VirtualMachineManual',
                                query:{
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    classId:self.classId,
                                    singleChaper:self.singleTask,
                                    stepTypeStr: self.stepType,

                                }
                            })
                        }else if(self.userStatus == 'EXIST_CLASS'){
                            self.clickId = item.id
                            self.$http.get('/tes/image-allocation/course/'+self.courseId+'/'+item.id).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                  if(res.data.allocated){
                                
                                self.$http.get('/tes/experiment/course/'+item.id+'/prompt').then(response => {
                                    let res = response.data
                                    if(res.code == '200'){
                                        if(res.data){
                                            // 弹窗是否强制跳转
                                            self.dialogVirtual = true
                                        }else{
                                            if (self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER') {
                                                // 跳转实验页
                                                self.$router.push({
                                                    path: "/Teaching/MyCourses/VirtualMachine",
                                                    query: {
                                                        courseId: self.courseId,
                                                        chapterId: item.id,
                                                        classId:self.classId,
                                                        stepTypeStr: self.stepType,
                                                        singleChaper:self.singleTask,
                                                    }
                                                })   
                                            }else if(self.roles == 'STUDENT'){
                                                // 跳转实验页
                                                self.$router.push({
                                                    path: "/Teaching/MyCourses/STVirtualMachine",
                                                    query: {
                                                        courseId: self.courseId,
                                                        chapterId: item.id,
                                                        classId:self.classId,
                                                        stepTypeStr: self.stepType,
                                                        singleChaper:self.singleTask,
                                                    }
                                                })
                                            }
                                        }
                                    }else{
                                        self.$message.error(res.message)
                                    }
                                }).catch(err => {
                                    console.log(err)
                                })
                            }else{
                                self.$router.push({
                                    path: '/Teaching/MyCourses/VirtualMachineManual',
                                    query: {
                                        courseId: self.courseId,
                                        chapterId: item.id,
                                        classId:self.classId,
                                        stepTypeStr: self.stepType,
                                        singleChaper:item.id,
                                        
                                    }
                                })
                            }
                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                        }
                    }else if(item.name == '随堂练习'){
                        //分为学生和老师身份
                        if(self.roles == 'STUDENT'){
                            if(self.userStatus=='NOT_CREATE_CLASS'){
                                self.typesStatus = 1   //没有班级时传1  不显示提交按钮
                            }else{
                                self.typesStatus = 2  //有班级时传2 显示提交按钮
                            }
                            self.$router.push({
                                path: "SPractice",
                                query: {
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    typesStatus:self.typesStatus,
                                    classId:self.classId,
                                    singleChaper:item.id,
                                }
                            })
                        }else if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                            self.$router.push({
                                path: "TPractice",
                                query: {
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    classId:self.classId,
                                    singleChaper:item.id,
                                }
                            })
                        }

                    }

                }
              
            },  
             // 确定跳转实验详情
            VirtualSave(){
                let self = this
                if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                    // 跳转实验页
                     self.$router.push({
                        path: "/Teaching/MyCourses/VirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.clickId,
                            classId:self.classId,
                            stepTypeStr: self.stepType,
                            singleChaper:self.singleTask,
                            
                        }
                    })
                }else if(self.roles == 'STUDENT'){
                     self.$router.push({
                        path: "/Teaching/MyCourses/STVirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.clickId,
                            classId:self.classId,
                            stepTypeStr: self.stepType,
                            singleChaper:self.singleTask,
                        }
                    })
                }
                self.dialogVirtual = false
            },

            // 初始化头部信息
            InitHeaderInfo() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 课程名称
                        self.courseName = res.data.courseName
                        // 章节名称
                        self.chapterName = res.data.chapterName
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化资源列表
            initResourceList() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/detail/resource?type=3').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.learningResourcesData = res.data.learningResources.displayVersion
                        self.otherResourcesData = res.data.otherResources.displayVersion
                        self.colages = res.data.config.schoolTypes
                        if(res.data.presetResource){
                            self.presetResourcesData = res.data.presetResource.displayVersion
                        }    
                       
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 眼睛开关控制
            //专课版本中多加chapterId，后台要求
            Control(index, name, controlStatus,chapterId){
                let self = this
                self.$http.put('/tes/course/'+self.courseId+'/resource-right?operatingType=2'+'&chapterId='+chapterId,[{
                    chapterId: chapterId,
                    resourcesType: index,
                    permission: [
                        {
                            name: name,
                            download: controlStatus,
                        }
                    ]
                }]).then(response =>{
                    let res = response.data
                    if(res.code == '200'){
                        // 初始化页面
                        self.initResourceList()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                // self.learningResourcesData[index].teacherOpenSwitch = controlStatus ? false : true
            },
            // 下载资源
            downloadFile(remark, fileName,chapterId){
                let self = this
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+chapterId+'/resource/file-download/permission',{
                    remark: remark,
                    fileName: fileName,
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){

                        self.downloadAxios(fileName,res.data)
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })

            },
            downloadAxios(fileName,token){
                let self = this
                let downloadElement = document.createElement('a');
                downloadElement.style.display = 'none';
                downloadElement.href = '/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download?token='+token
                downloadElement.download = fileName; //下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
                // self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download?token='+token,{responseType: 'blob'}) .then((response) => {
                //     let contentType = response.headers["content-type"]
                //     // 判断contentType
                //     if(contentType=='application/json;charset=UTF-8'){
                //         self.$message.error(decodeURIComponent(response.headers["code-message"]))
                //     } else {
                //         let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                //         let url = window.URL.createObjectURL(blob);
                //         let downloadElement = document.createElement('a');
                //         downloadElement.style.display = 'none';
                //         downloadElement.href = url;
                //         downloadElement.download = fileName; //下载后文件名
                //         document.body.appendChild(downloadElement);
                //         downloadElement.click(); //点击下载
                //         document.body.removeChild(downloadElement); //下载完成移除元素
                //         window.URL.revokeObjectURL(url);
                //     }
                // }).catch(err => {
                //     console.log(err)
                // })
            },
            // 批量控制弹窗
            ControlDialog() {
                let self = this
                self.$http.post('/tes/course/'+self.courseId+'/resource-right?operatingType=1',[
                    {
                        resourcesType: 5,
                        names: ['理论课学习视频','学习课件','随堂练习','备课材料','实验手册','实验课学习视频','随堂练习答案','课程材料']
                    },
                    {
                        resourcesType: 6,
                        names: []
                    },
                ]).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for(let i = 0; i < res.data.length; i++){
                            if(res.data[i].remark == '备课材料'){
                                self.value7 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '学习课件'){
                                self.value1 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '实验手册'){
                                self.value3 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '实验课学习视频'){
                                self.value2 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '理论课学习视频'){
                                self.value4 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '课程材料'){
                                self.value8 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '随堂练习'){
                                self.value5 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '随堂练习答案'){
                                self.value6 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '其他资源'){
                                self.value9 = res.data[i].downloaded
                            }
                        }
                    }else if(res.code == '404'){
                        // 初始化控制权限
                        self.value1 = true
                        self.value2 = true
                        self.value3 = true
                        self.value4 = true
                        self.value5 = true
                        self.value6 = false
                        self.value7 = false
                        self.value8 = true
                        self.value9 = true
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                // 打开弹窗
                self.dialogVisible = true
            },
            // 批量控制保存
            ControlSave(){
                let self = this
                self.$http.put('/tes/course/'+self.courseId+'/resource-right?operatingType=1',[
                    {
                        resourcesType: 5,
                        permission: [
                            {
                                name: '理论课学习视频',
                                download: self.value4
                            },
                            {
                                name: '学习课件',
                                download:  self.value1
                            },
                            {
                                name: '随堂练习',
                                download:  self.value5        
                            },
                            {
                                name: '备课材料',
                                download:  self.value7         
                            },
                            {
                                name: '实验手册',
                                download:  self.value3
                            },
                            {
                                name: '实验课学习视频',
                                download:  self.value2
                            },
                            {
                                name: '随堂练习答案',
                                download:  self.value6
                            },
                            {
                                name: '课程材料',
                                download:  self.value8
                            },
                        ]
                    },
                    {
                        resourcesType: 6,
                        allResources: true,
                        download:  self.value9
                    }
                ]).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '批量控制保存成功',
                            type: 'success'
                        })
                        self.initResourceList()
                        // 关闭弹窗
                        self.dialogVisible = false
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>
<style scoped>
    /* 专科版本 */
    .dialog-virtual>>>.el-dialog__footer{
        text-align: center;
    }
    .blocks::-webkit-scrollbar{
        width: 5px;
        height: 5px;
    }
    .blocks::-webkit-scrollbar-thumb {
        background: #4a4a4a;
        border-radius:50px;
    }
    .blocks{
        overflow-y: scroll;
        max-height: 760px;
    }
    .el-collapse{
        border:none;
    }
    .el-collapse-item>>>.el-collapse-item__header{
        background: #2d3136;
        color: #fff;
        border-bottom:none;
        text-align: center
    }
    .el-collapse-item>>>.el-icon-arrow-right{
        display: none;
    }
    .el-collapse-item>>>.el-collapse-item__content{
        background: #26292c;
        color: #a2a3a4;
        padding: 5px 20px;

    }
    .el-collapse-item__content>div{
        padding: 4px 0;
    }
    .el-collapse-item>>>.el-collapse-item__wrap{
        border-bottom:none;
    }
</style>
<style>
    #ymuchControl .el-dialog__body{
        padding: 28px 68px;
        font-size: 16px;
    }
    #ymuchControl .el-dialog__body .iconfont{
        color: #207fec;
    }
    #ymuchControl .headBox{
        color: #000000;
        margin-bottom: 38px;
    }
    #ymuchControl .contentBox ul{
        padding: 0 40px;
    }
    #ymuchControl .contentBox li{
        float: left;
        /* width: 120px; */
        height: 15px;
        margin-bottom: 22px;
        font-size: 14px;
    }
     #ymuchControl .contentBox li:nth-of-type(odd){
        margin-right: 33px;
    }
     #ymuchControl .contentBox li .switches{
         float: right;
         margin-left: 22px;
     }
     #ymuchControl .button-style{
         width: 90px;
         padding: 0;
         height: 32px;
     }
     #ymuchControl .dialog-footer{
         display: block;
         text-align: center;
     }
     .el-switch{
         margin-top: -2px
     }
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
.preview-top {
    height: 60px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    .preview-top1 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #101937;
        position: fixed;
        top: 0;
        color: #fff;
        font-size: 14px;
        .preview-top-content {
            width:1200px;
            margin:0 auto;
            position: relative;
            span{
                margin-right:40px;
            }
            .preview-title {
                font-size: 18px;
                margin-right:0;
            }
            .preview-line{
                margin:0 6px;
            }
        }
    }
    .preview-top2 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        position: fixed;
        top: 80px;
        padding:0;
        font-size: 14px;
        .preview-top-content{
            width:1200px;
            margin:0 auto;
            padding:0 40px;
            .button-style{
                margin-left:20px;
            }
        }
    }
}
.jx-resource-list{
    margin-bottom: 28px;
}
.jx-content{
    position: relative;
    margin-top: 40px;
}
.muchControl{
    position: absolute;
    right: 40px;
    top: 30px;
    height: 32px;
    padding: 0;
    width: 120px;
}
.disabled{
    border-color: #ddd;
    color: #ddd;
    cursor: not-allowed;
    &:hover{
       // background: #fff;
    }
}
.title{
    font-size: $fs16;
    color: $title-gray;
    margin-bottom: 35px;
    font-weight: normal;
}
.fileBox{

    margin-left: 10px;
    border-bottom: 1px solid #e8e8e8;
}
.fileBox>ul>li{
    float: left;
    margin-right: 30px;
    height: 166px;
    width: 166px;
    text-align: center;
    margin-bottom: 14px;
    position: relative;
    &:hover{
        background: #f9f8f8;
        .fileBtnBox{
            display: block;
        }
    }
}
.fileBox>ul>li>img{
    margin-top: 28px;
}
.fileBox>ul>li .typeName{
    margin-top: 10px;
    font-size: $fs16;
    color: #727272;
}
.jx-content .fileBox>ul>li .fileName{
    margin-top: 6px;
    font-size: $fs14;
    color: #727272;
    position: relative;
    height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fileBox>ul>li .fileBtnBox{
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    line-height: 12px;
    text-align: right;
    display: none;
    a,i{
        color: #727272;
    }
}
.fileBox>ul>li .fileBtnBox i.disabled{
    color: #d9d9d9;
}
.fileBox>ul>li .fileBtnBox>i:nth-of-type(1){
    margin-right: 11px;
    cursor: pointer;
}
.fileBox>ul>li .fileBtnBox>i:nth-of-type(2){
    margin-right: 14px;
    cursor: pointer;
}
// 暂无数据
.no-data-tips{
    padding-top: 10%;
    text-align: center;
    &>p{
        margin: 30px 0;
        color: #9999;
        font-size: 16px
    }
}
//专科版本添加
.chapterlists{
	position: absolute;
	right: 0px;
	cursor: pointer;
    color: #bbb;
    &:hover{
        color: #fff;
    }
}
//详情盒子
.detailBox{
	width: 400px;
    position: absolute;
    top: 4px;
    bottom: initial;
    right: 38px;
    background: #26292c;
    max-height: 760px;
    border-radius: 4px;
    display: none;
    z-index: 9;
    .chapterList-top{
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        padding: 0 18px;
        &>p{
            line-height: 50px;
            color: #a2a3a4;
        }
        i{
            color: #a2a3a4;
            &:hover{
                color: #fff;
                cursor: pointer;
            }
        }
    }
    .infoName{
        display: inline-block;
         &:hover{
            span{color: #1374e4;}
            .crile{
                background: #1374e4;
            }
        }
    }
    .icon-diannao-copy{
        font-size: 14px;
        margin-left: 8px;
        color: #1374e4;
        vertical-align:super;
    }
    .courseName{
        margin: 5px 0;
        cursor: pointer;
        &:hover{
            color: #fff;

        }
        .icon-tubiaozhizuomoban1{
            color: #1374e4;
            font-size: 16px;
        }

    }
}
.collapsTitle{
    text-align: left;
    // margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 22px;
    color: #a2a3a4;
    .collapsTitle_span{
        max-width: 270px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 13px;
    }
    .icon-chaibaoguoqujian{
        color: #a2a3a4;
        font-size: 14px;
    }
    &:hover{
        color: #fff;
        .icon-chaibaoguoqujian{
                color: #fff;
        }
    }
    .icon-tubiaozhizuomoban1{
        color: #1374e4;
        font-size: 16px;
    }
}
.icon-shijian00{
	color: #1374e4;
	margin-left: 5px
}

.crile{
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #a2a3a4;
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 9px;

}
.studying{
	color: #1374e4;
}
.crileBg{
	background: #1374e4;
}
.detailbox{
	padding:2px 0 2px 15px;
	cursor: pointer;
	&:hover{
		color: #1374e4;
		.crile{
			background: #1374e4
		}
	}
}
.Tiltlefiles{
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 210px;
    cursor: pointer;
}

.intnet{
	color: #1277eb;
	font-size: 14px;
	display: inline-block;
	vertical-align: 12px;
}
.taskName{
	margin-right: 5px;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 300px;
}
.icon-42{
    font-size: 12px;
    vertical-align: text-bottom;
    margin-left: -2px;
    margin-right: 5px;
}
.dialogList{
    .dialog-content{
        text-align: center;
        i{
            font-size: 50px;
            color: #d6d6d6;
            display: block;
            margin-top: 25px;
        }
        p{
            font-size: 14px;
            text-align: center;
            line-height: 18px;

        }
        .handbook-item{
            text-align: center;
            margin-top: 30px;
        }
    }
    .btnlist{
        .button-style{
            width: 90px;
        }
    }
}

</style>
